<template>
    <div>
        <van-tabbar v-model="active" fixed :placeholder="placeholder" :route="true"  active-color="#49CA6F" inactive-color="#798391" @change="tabChange">
            <van-tabbar-item icon="orders-o" to="/home">订单中心</van-tabbar-item>
            <van-tabbar-item v-show="is_menu" icon="apps-o" to="/menu">菜单</van-tabbar-item>
            <van-tabbar-item icon="manager-o" to="/my">我的</van-tabbar-item>
            
        </van-tabbar>
    </div>
</template>
<script>
export default {
    props: {
        value: {
            type: Number,
            default: 0
        },
        is_menu: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: Boolean,
            default: true
        }
    },
    watch: {
        value(newVal) {
            console.log('List updated:', newVal);
            // 执行响应操作
            this.active = newVal;
        }
    },
    data() {
        return {
            active: this.value
        }
    },
    methods: {
        tabChange(val) {
            console.log(val)
            // 使用组件自带的router 配置！！！！！！
            // console.log(this.active)
            // console.log(this.value)
            // if (val == this.value) {
            //     return false;
            // }
            // if (val == 0) {
            //     this.$router.replace({path:'/home'})
            // } else if (val == 1) {
            //     this.$router.replace({path:'/menu'})
            // } else if (val == 2) {
            //     this.$router.replace({path:'/my'})
            // }
        }
    }
}
</script>
<style lang="less" scoped>
::v-deep .van-tabbar--fixed{
    z-index: 200;
}
</style>